<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="set">设置</button>
    <button class="get">获取</button>
    <button class="edit">修改</button>
    <button class="del">删除</button>
    <button class="key">key</button>
    <div>
        <a href="./01 cookie的封装.html">同级</a>
        <a href="./test/1.html">子级</a>
        <a href="../../day11/html/01 日历_函数封装.html">其他目录</a>
        <a href="https://www.baidu.com">百度</a>
    </div>
</body>
<script>
    // webStorage => H5新增存储数据的方式(网页存储)

    // WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。 (存储大小5M 也可以跨页面访问(默认存储在站点根目录 整个网站都可以访问)   提供了专门操作数据的方法(API => 快捷实现数据的增删改查))

    // ## WebStorage两个主要目标：
    // 1.提供一种在cookie之外存储会话数据的路径  (一种新的在用户本地 存储数据的方式)
    // 2.提供一种存储大量可以跨会话存在的数据的机制  (webStorage也可以跨页面访问 )
    // HTML5的WebStorage提供了两种API：localStorage（本地存储）和 sessionStorage（会话存储）  => 全局对象


    // 如何查看WebStorage?
    // 1. 手动查看 (方便调试)
    // 开发者工具 => application(应用) =>  Storage =>  localStorage（本地存储）和 sessionStorage

    // 2. JS查看   全局对象(window可省略)
    console.log(window.localStorage);
    // console.log(window.sessionStorage);


    // localStorage（本地存储）和 sessionStorage 的属性和方法
    // 属性:
    // length  存储数据的条数

    // 方法:
    // setItem(key,value)   对应键名存储数据(没有就新增 有就修改)
    // getItem(key)         对应键名获取数据
    // removeItem(key)      对应键名删除数据
    // clear()              清除所有数据
    // key()                传入一个下标,返回对应的键名


    var set = document.getElementsByClassName("set")[0];
    var get = document.getElementsByClassName("get")[0];
    var edit = document.getElementsByClassName("edit")[0];
    var del = document.getElementsByClassName("del")[0];
    var key = document.getElementsByClassName("key")[0];


    // 注意:
    // 1. localStorage（本地存储）和 sessionStorage（会话存储） =>  对象 => 键值对形式存在
    // 2. 数据也是一条一条存储的
    // 3. 也可以使用对象的语法设置 / 获取 / 删除数据
    // 4. localStorage（本地存储）和 sessionStorage   => 键值也只能是字符串类型  => 如果存储数组或对象 => 转化为JSON字符串


    // localStorage 和 sessionStorage的区别?
    // 时效性(生命周期的区别)
    // localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。
    // localStorage除非主动删除数据，否则数据永远不会消失。
    // => 数据长时间存储 


    // sessionStorage 在浏览器关闭/窗口关闭时就过期 -> 销毁(仅在当前窗口,当前网站有效,)
    // sessionStorage引入了一个“浏览器窗口会话”的概念, sessionStorage只能在同网站,同窗口下访问
    //  如果打开同网站新的窗口(同网站 不同窗口)  数据无法公有
    //  同窗口,但是不同网站 数据也无法公有
    //  => 敏感账号一次性登录

    set.onclick = function () {
        sessionStorage.setItem("user", "a123123");
        sessionStorage.setItem("pwd", "123123");
        sessionStorage.phone = "17386141516";
        sessionStorage.email = "123123@qq.com";


        var arr = [1, 2, 3];
        var obj = { a: 1, b: 2 };
        sessionStorage.setItem("arr", JSON.stringify(arr));
        sessionStorage.obj = JSON.stringify(obj);

        console.log(sessionStorage);
    }

    get.onclick = function () {
        console.log(sessionStorage.getItem("user"));
        console.log(sessionStorage.getItem("pwd"));
        console.log(sessionStorage.getItem("phone"));
        console.log(sessionStorage.getItem("email"));
        console.log(JSON.parse(sessionStorage.arr));
        console.log(JSON.parse(sessionStorage.obj));
    }

    del.onclick = function () {
        // console.log(sessionStorage.removeItem("user"));
        // console.log(sessionStorage.removeItem("pwd"));
        // console.log(sessionStorage.removeItem("phone"));
        // console.log(sessionStorage.removeItem("email"));
        // console.log(delete sessionStorage.arr);
        // console.log(delete sessionStorage.obj);

        sessionStorage.clear();
        console.log(sessionStorage);
    }


    key.onclick = function () {
        // 遍历 localStorage(对象)  sessionStorage(对象)

        // 注意 不能用for...in遍历
        // for (var key in localStorage) {
        //     console.log(key);
        // }

        for (var i = 0; i < sessionStorage.length; i++) {
            var key = sessionStorage.key(i);
            var val = sessionStorage.getItem(key);
            console.log(key, val, sessionStorage[key]);
        }

    }



</script>

</html>